<script setup>
import {computed, defineEmits, defineProps, ref} from 'vue'

const props = defineProps({
  options: Array,
  modelValue: {
    type: Array,
    default: ''
  },
  color: {
    type: String,
    default: 'red'
  },
  showNoneOption: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:modelValue']);
const checkNone = ref(false)

const selectedValue = computed({
  get() {
    return props.modelValue ? props.modelValue : [];
  },
  set(value) {
    emit('update:modelValue', value ? value : []);
  }
});

const onNoneChange = (checked) => {
  if (checked) {
    selectedValue.value = [];
  }
}
const onOtherChange = (checked) => {
  if (checked.length >= 1) {
    checkNone.value = false
  }
}
</script>

<template>
  <div class="van-checkbox-container">
    <van-checkbox-group v-model="selectedValue" direction="horizontal" @change="onOtherChange">
      <van-checkbox shape="square" v-for="(item,index) in options" :key="index" :name="item.key">
        <template #icon="props">
          <van-button size="small" hairline v-if="props.checked" :color="color">{{ item.name }}</van-button>
          <van-button size="small" hairline v-else>{{ item.name }}</van-button>
        </template>
      </van-checkbox>
    </van-checkbox-group>
    <van-checkbox v-if="showNoneOption" shape="square" v-model="checkNone" @change="onNoneChange">
      <template #icon="props">
        <van-button size="small" hairline v-if="props.checked" :color="color">无</van-button>
        <van-button size="small" hairline v-else>无</van-button>
      </template>
    </van-checkbox>
  </div>

</template>

<style scoped lang="scss">
.van-checkbox-container {
  display: flex;
  justify-content: center;
}

:deep(.van-checkbox__icon) {
  height: 2em;
}

.van-checkbox-group--horizontal {
  justify-content: center;
}
</style>